<template>
    <div>
        <div>
            <form action="/">
                <van-icon name="arrow-left" v-if="value" style="font-size: 25px; line-height: 54px;" @click="changeGo"/>
                <van-search
                        v-model="value"
                        show-action
                        placeholder="请输入搜索关键词"
                        @click="changeUrl"
                        @search="onSearch"
                        @cancel="onCancel"
                        :class="value?'size':''"
                />
            </form>
        </div>
        <div class="body">
            <div v-if="flag">
                <search-body v-if="!value"></search-body>
                <search-info v-else :text="value"></search-info>
            </div>
            <router-view :text="value" v-else></router-view>
        </div>
    </div>

</template>

<script>
    import searchInfo from "../components/searchInfo";
    import searchBody from "../components/searchBody";


    export default {
        name: "search",
        data() {
            return {
                value: "",
                historylist: [],
                flag: true
            }
        },
        components: {
            searchBody,
            searchInfo
        },
        created() {
            this.historylist = JSON.parse(localStorage.getItem("his")) || [];
        },
        methods: {
            changeGo() {
                this.$router.go(-1);
            },
            changeUrl() {
                this.$router.push("/search");
                this.flag = true;
            },
            onSearch() {

                this.historylist = JSON.parse(localStorage.getItem("his")) || [];
                if (!this.historylist.some(item => item == this.value) && this.value != "") {
                    this.historylist.push(this.value);
                    localStorage.setItem("his", JSON.stringify(this.historylist))
                }
                this.flag = false
                this.$router.push("/search/searchRes")

            },
            onCancel() {
                this.$router.push("/index")
            },
        }
    }
</script>

<style lang="less" scoped>
    .size {
        width: 92%;
        float: right;
    }
    .body{
        height: calc(100vh - 55px);
        overflow: scroll;

    }
</style>